import { useState } from "react";
import "./index.scss"
export default function Scrollbar({ scrollbarData, lightItem, handleScrollClick }) {
    
    const [scrollClass, updateScrollClass] = useState("hasHide")

    const handleScroll = () => {
        if (scrollClass === "showAll") {
            return false
        }
        updateScrollClass("showAll")
    }

    return (
        <div className="scrollbar">
            <ul className={scrollClass} onScroll={handleScroll}>
                {
                    scrollbarData.map(item => {
                        return <li 
                        onClick={() => handleScrollClick(item.id)}
                        className={lightItem === item.id ? "current" : ""} 
                        key={item.id}>{item.title}
                        </li>
                    })
                }

            </ul>
        </div>
    )
}